import { InfoCircleTwoTone, PlusOutlined } from '@ant-design/icons';
import { ActionType, PageContainer, ProColumns, ProTable } from '@ant-design/pro-components'
import { Button, Divider, Modal, message } from 'antd'
import React, { useRef, useState } from 'react'
import AddDevices from './components/AddDevices';
import EditDevices from './components/EditDevices';
import { delete_lonbon, get_lonbon_list } from '@/services/devices';

type GithubIssueItem = {
    id: number;
    patient_name: string;
    sn: string;
    type: string;
    manage_name: string;
    create_time: string;
};
const MonitoringEquipment = () => {
    const actionRef = useRef<ActionType>();
    // 存储新增设备模态框状态
    const [addModal, setAddModal] = useState(false)
    // 存储编辑设备模态框状态
    const [editModal, setEditModal] = useState(false)
    // 存储当前id
    const [id, setId] = useState<number | undefined>()
    // 控制解绑模态框状态
    const [unbinding, setUnbinding] = useState(false);

    // 控制新增模态框的显示与隐藏
    const isShowAddModal = (show: boolean) => {
        setAddModal(show)
    }
    // 控制编辑模态框的显示与隐藏
    const isShowEditModal = (show: boolean) => {
        setEditModal(show)
    }
    // 控制解绑模态框的显示与隐藏
    const isShowUnbinding = (status: boolean) => {
        setUnbinding(status);
    };

    // 获取监护设备列表
    const getDevices = async (params: {
        pageSize?: number | undefined;
        current?: number | undefined;
        keyword?: string | undefined;
    }) => {
        //默认分页参数和后端接口字段不匹配
        let request_body = {
            ...params,
            current: params.current,
            pageSize: params.pageSize,
        };
        let res = await get_lonbon_list(request_body)
        console.log('监护设备列表', res);
        return {
            data: res.data.list,
            success: true,
            total: res.data.total_count,
        };
    }

    // 确认删除的回调
    const delOk = async () => {
        let request_body = {
            id,
        };
        const res: any = await delete_lonbon(request_body);
        if (res.msg == 'ok') {
            message.success('删除成功');
            actionRef.current?.reload();
        } else {
            message.error(res.msg);
        }
        isShowUnbinding(false);
    };

    const columns: ProColumns<GithubIssueItem>[] = [
        {
            title: '序号',
            dataIndex: 'index',
            valueType: 'index',
            align: 'center',
            width: 48,
        },
        {
            title: '设备类型',
            dataIndex: 'type',
            align: 'center',
            valueType: 'select',
            valueEnum: {
                1: {
                    text: '入户终端'
                },
            }
        },
        {
            title: 'MAC地址',
            dataIndex: 'mac',
            align: 'center',
        },
        {
            title: '病床编号',
            dataIndex: 'code',
            align: 'center',
        },
        {
            title: '患者',
            dataIndex: 'patient_name',
            hideInSearch: true,
            align: 'center',
        },
        {
            title: '创建人',
            key: 'manage_name',
            dataIndex: 'manage_name',
            align: 'center',
            hideInSearch: true
        },
        {
            title: '创建时间',
            key: 'create_time',
            dataIndex: 'create_time',
            align: 'center',
            hideInSearch: true,
        },
        {
            title: '操作',
            valueType: 'option',
            key: 'option',
            align: 'center',
            render: (text, record, _, action) => (
                <><Button
                    key="editable"
                    type='link'
                    onClick={() => {
                        setId(record.id)
                        isShowEditModal(true)
                    }}
                >
                    编辑
                </Button>
                    <Button
                        key="del"
                        type='link'
                        onClick={() => {
                            setId(record.id);
                            isShowUnbinding(true);
                        }}
                    >
                        删除
                    </Button></>

            ),
        },
    ];
    return (
        <PageContainer breadcrumb={false}>
            <ProTable<GithubIssueItem>
                columns={columns}
                actionRef={actionRef}
                cardBordered
                request={async (params = {}) => getDevices(params)}
                editable={{
                    type: 'multiple',
                }}
                rowKey={(record) => record.id}
                search={{
                    labelWidth: 'auto',
                }}
                options={{
                    setting: {
                        listsHeight: 400,
                    },
                }}
                pagination={{
                    pageSize: 10,
                }}
                dateFormatter="string"
                headerTitle="监护设备列表"
                toolBarRender={() => [
                    <Button
                        key="button"
                        icon={<PlusOutlined />}
                        onClick={() => {
                            isShowAddModal(true);
                        }}
                        type="primary"
                    >
                        新增
                    </Button>,
                ]}
            />
            {/* 新增 */}
            {addModal ? <AddDevices addModal={addModal} isShowAddModal={isShowAddModal} actionRef={actionRef}></AddDevices> : ""}
            {/* 编辑 */}
            {editModal ? <EditDevices editModal={editModal} isShowEditModal={isShowEditModal} actionRef={actionRef} id={id}></EditDevices> : ""}
            {/* 解绑确认 */}
            <Modal title="删除确认" open={unbinding} onOk={delOk} onCancel={() => isShowUnbinding(false)}>
                <Divider />
                <p>
                    <InfoCircleTwoTone twoToneColor="#ffcc00" /> 删除后数据不可恢复，确定要删除吗？
                </p>
            </Modal>
        </PageContainer>
    )
}
export default MonitoringEquipment